<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组去重方法</title>
</head>

<body>
  <h1 style="text-align: center;">数组去重</h1>
  <script>
    function out(type, arr) {
      console.group(type)
      console.log(arr)
      console.groupEnd()
    }
    var arr = [1, 2, 3, 4, 3, 4, 5, 1, 5, 6, 6]
    // 双重for循环
    {
      let newArr1 = [arr[0]]
      for (let i = 1; i < arr.length; i++) {
        let flag = true
        for (let j = 0; j < newArr1.length; j++) {
          if (arr[i] === newArr1[j]) {
            flag = false
            break
          }
        }
        if (flag) {
          newArr1.push(arr[i])
        }
      }
      out('1、双重for循环', newArr1)
    }
    // filter去重
    {
      let newArr2 = arr.filter((item, index) => {
        return arr.indexOf(item) == index
      })
      out('2、filter', newArr2)
    }
    // indexOf
    {
      let newArr6 = []
      for (let n = 0; n < arr.length; n++) {
        if(newArr6.indexOf(arr[n])===-1){
          newArr6.push(arr[n])
        }
      }
      out('3、indexOf',newArr6)
    }
    // includes去重
    {
      let newArr3 = []
      for (let k = 0; k < arr.length; k++) {
        if (!newArr3.includes(arr[k])) {
          newArr3.push(arr[k])
        }
      }
      out('4、includes', newArr3)
    }
    // Set
    {
      let newArr4 = [...new Set(arr)]
      out('5、Set', newArr4)
    }
    // Map
    {
      let map = new Map
      let newArr5 = []
      for (let m = 0; m < arr.length; m++) {
        if (!map.has(arr[m])) {
          map.set(arr[m], true)
          newArr5.push(arr[m])
        }
      }
      out('6、Map', newArr5)
    }
  </script>
</body>

</html>